import Link from "next/link";
import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { Bar, Chip, Flag, PageHeader, Panel, Stat, Table, Td } from "@/components/ui";
import { api } from "@/lib/api";
import { fmtInt, fmtPct, relTime } from "@/lib/format";

export const dynamic = "force-dynamic";

export async function generateMetadata({ params }: { params: Promise<{ sector: string }> }): Promise<Metadata> {
  const { sector } = await params;
  const c = await api.coverageSector(sector);
  if (!c) return { title: "Coverage" };
  return { title: `${c.label} · coverage ${c.score.toFixed(1)}`, description: `${fmtInt(c.covered)} of ${fmtInt(c.members)} ${c.label.toLowerCase()} organizations observed by WebSensor (${c.universes.length} universes).`, alternates: { canonical: `/coverage/${c.sector}` } };
}

function band(score: number): string {
  return score >= 80 ? "text-signal" : score >= 60 ? "text-high" : score >= 40 ? "text-warn" : "text-fg-muted";
}

type Params = { u?: string; status?: string };

export default async function CoverageSectorPage({ params, searchParams }: { params: Promise<{ sector: string }>; searchParams: Promise<Params> }) {
  const { sector } = await params;
  const sp = await searchParams;
  const c = await api.coverageSector(sector);
  if (!c) notFound();
  const universes = sp.u ? c.universes.filter((u) => u.key === sp.u) : c.universes;
  const filter = (m: { covered: boolean; shadow: number; seed_status: string | null }): boolean => {
    if (sp.status === "observed") return m.covered;
    if (sp.status === "shadow") return !m.covered && m.shadow > 0;
    if (sp.status === "queued") return !m.covered && m.shadow === 0 && (m.seed_status === "queued" || m.seed_status === "discovering");
    if (sp.status === "missing") return !m.covered && m.shadow === 0 && !(m.seed_status === "queued" || m.seed_status === "discovering");
    return true;
  };
  const href = (patch: Params): string => {
    const n = { ...sp, ...patch };
    const q = new URLSearchParams();
    if (n.u) q.set("u", n.u);
    if (n.status) q.set("status", n.status);
    const s = q.toString();
    return `/coverage/${c.sector}${s ? `?${s}` : ""}`;
  };
  return (
    <>
      <PageHeader
        compact
        kicker={<Link href="/coverage" className="hover:underline">Coverage</Link>}
        title={<span>{c.label} <span className={`font-mono ${band(c.score)}`}>{c.score.toFixed(1)}</span></span>}
        description={`${c.description ?? ""} ${fmtInt(c.covered)} of ${fmtInt(c.members)} organizations observed · breadth ${fmtPct(c.breadth)} · depth ${fmtPct(c.depth)} · ${fmtInt(c.sensors)} sensors matched · ${fmtInt(c.shadow_members)} in shadow · ${fmtInt(c.queued)} queued for discovery. Updated ${relTime(c.generated_at)}.`}
      />
      <div className="panel mb-4 grid grid-cols-2 divide-x divide-y divide-line sm:grid-cols-3 lg:grid-cols-6 lg:divide-y-0">
        <Stat label="Score" value={<span className={band(c.score)}>{c.score.toFixed(1)}</span>} hint={`weight ×${c.weight}`} />
        <Stat label="Breadth" value={fmtPct(c.breadth)} hint="importance-weighted share observed" />
        <Stat label="Depth" value={fmtPct(c.depth)} hint="sensors per organization / 5" />
        <Stat label="Observed" value={`${fmtInt(c.covered)} / ${fmtInt(c.members)}`} tone="signal" />
        <Stat label="Shadow" value={fmtInt(c.shadow_members)} tone="info" hint="validated, proving signal" />
        <Stat label="Countries" value={fmtInt(c.by_country.filter((x) => x.country !== "—").length)} hint={`${c.universes.length} universes`} />
      </div>
      <div className="mb-2 flex flex-wrap items-center gap-1">
        <span className="label mr-1">status</span>
        {[["", "all"], ["observed", "observed"], ["shadow", "shadow"], ["queued", "queued"], ["missing", "not yet seeded"]].map(([k, l]) => (
          <Chip key={k} href={href({ status: k || undefined })} tone={(sp.status ?? "") === k ? "signal" : "default"}>{l}</Chip>
        ))}
        <span className="label mx-1">·</span>
        <span className="label mr-1">universe</span>
        <Chip href={href({ u: undefined })} tone={!sp.u ? "signal" : "default"}>all</Chip>
        {c.universes.map((u) => (
          <Chip key={u.key} href={href({ u: u.key })} tone={sp.u === u.key ? "signal" : "default"}>{u.label} <span className="font-mono text-[10.5px] text-fg-subtle">{u.covered}/{u.members}</span></Chip>
        ))}
      </div>
      {universes.map((u) => {
        const items = u.items.filter(filter);
        return (
          <Panel key={u.key} dense className="mb-4" title={<span>{u.label} <span className={`font-mono text-[12px] ${band(u.score)}`}>{u.score.toFixed(1)}</span> <span className="font-mono text-[11px] text-fg-subtle">· {u.covered}/{u.members} observed · {fmtInt(u.sensors)} sensors</span></span>} action={u.provenance ? <span className="max-w-[40ch] truncate text-[10.5px] text-fg-subtle" title={u.provenance}>{u.provenance}</span> : undefined}>
            {items.length === 0 ? (
              <div className="p-3 text-[12px] text-fg-subtle">No member matches this filter.</div>
            ) : (
              <div className="max-h-[32rem] overflow-auto">
                <Table head={["Organization", "Domain", "Country", "Imp.", "Status", "Sensors", "Depth", ""]}>
                  {items.map((m) => (
                    <tr key={`${u.key}/${m.domain}`} className="hover:bg-panel-2/60">
                      <Td>{m.source_id ? <Link href={`/source/${m.source_id}`} className="font-medium hover:underline">{m.name}</Link> : <span className="font-medium">{m.name}</span>}</Td>
                      <Td mono><Link href={`/domain/${m.domain}`} className="text-fg-muted hover:underline">{m.domain}</Link></Td>
                      <Td>{m.country ? <span className="inline-flex items-center gap-1 font-mono text-[11px] text-fg-muted"><Flag code={m.country} /> {m.country}</span> : <span className="text-fg-subtle">—</span>}</Td>
                      <Td mono className="text-fg-subtle">{m.importance}</Td>
                      <Td>{m.covered ? <Chip tone="ok">observed</Chip> : m.shadow > 0 ? <Chip tone="info">shadow ×{m.shadow}</Chip> : m.seed_status === "queued" || m.seed_status === "discovering" ? <Chip tone="warn">{m.seed_status}</Chip> : m.seed_status === "blocked" ? <Chip tone="danger">blocked</Chip> : m.seed_status ? <Chip>{m.seed_status}</Chip> : <Chip>not seeded</Chip>}</Td>
                      <Td mono>{m.sensors}{m.shadow ? <span className="text-fg-subtle"> +{m.shadow}</span> : null}</Td>
                      <Td><div className="w-16"><Bar value={m.depth * 100} tone={m.depth >= 0.8 ? "signal" : m.depth >= 0.4 ? "mid" : "info"} /></div></Td>
                      <Td>{m.source_id && <Link href={`/source/${m.source_id}`} className="whitespace-nowrap text-[11px] text-fg-subtle hover:text-fg">source →</Link>}</Td>
                    </tr>
                  ))}
                </Table>
              </div>
            )}
          </Panel>
        );
      })}
    </>
  );
}